<template>
    <view class="wrapper">
        <view class="title">1. 普通选择器 (mode="selector")</view>
        <view class="picker-box">
            <picker mode="selector" :range="eduList" @change="eduChange">
                <view class="picker-content">
                    <text>当前选择：</text>
                    <text>{{eduList[eduIndex]}}</text>
                </view>
            </picker>
        </view>
        
        <view class="title">2. 日期选择器 (mode="date")</view>
        <view class="picker-box">
            <picker mode="date" @change="dateChange">
                <view class="picker-content">
                    <text>当前选择：</text>
                    <text>{{selectedDate}}</text>
                </view>
            </picker>
        </view>
        
        <view class="title">3. 时间选择器 (mode="time")</view>
        <view class="picker-box">
            <picker mode="time" @change="timeChange">
                <view class="picker-content">
                    <text>当前选择：</text>
                    <text>{{selectedTime}}</text>
                </view>
            </picker>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 普通选择器
                eduList: ['本科', '硕士', '博士', '其他'],
                eduIndex: 0, // v-model 对 picker 支持不佳，我们用 index 手动管理
                
                // 日期选择器
                selectedDate: '请选择日期',
                
                // 时间选择器
                selectedTime: '请选择时间'
            }
        },
        methods: {
            eduChange(e) {
                // e.detail.value 是选中的索引（字符串类型）
                console.log('选中的索引：', e.detail.value);
                this.eduIndex = parseInt(e.detail.value);
            },
            dateChange(e) {
                // e.detail.value 是选中的日期
                console.log('选中的日期：', e.detail.value);
                this.selectedDate = e.detail.value;
            },
            timeChange(e) {
                // e.detail.value 是选中的时间
                console.log('选中的时间：', e.detail.value);
                this.selectedTime = e.detail.value;
            }
        }
    }
</script>

<style>
.wrapper {
    padding: 15px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    margin-top: 10px;
}
.picker-box {
    height: 45px;
    line-height: 45px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 10px;
    background-color: #fff;
}
.picker-content {
    display: flex;
    justify-content: space-between;
}
</style>